<script>
import dayjs from "dayjs";
import comMixin from "./comMixin.js";
import FormDatePicker from "./datepicker.vue";
export default {
  mixins: [comMixin],
  props: {
    startTimeField: {
      type: String,
    },
    endTimeField: {
      type: String,
    },
  },
  data() {
    return {
      value: "",
    };
  },
  watch: {
    formData: {
      immediate: true,
      deep: true,
      handler() {
        this.onDateChange();
      },
    },
  },
  methods: {
    onVisibleChange(show) {
      const domDatepickerVisiable = [
        ...this.$refs.formitem.$refs.datepicker.$el.classList,
      ].includes("is-active");
      const domSelectVisiable =
        this.$refs.formselect.$refs.popper.$el.style.display != "none";
      console.log(domDatepickerVisiable, domSelectVisiable);
      if (show) {
        this.onShowDatepicker();
      } else {
        this.onCloseDatepicker();
      }
    },
    onShowDatepicker() {
      this.$refs.formitem.$refs.datepicker.focus();
      this.$refs.formselect.focus();
    },
    onCloseDatepicker() {
      setTimeout(() => {
        this.$refs.formitem.$refs.datepicker.blur();
        this.$refs.formselect.blur();
      }, 100);
    },
    onClear() {
      this.$refs.formitem.onReset();
    },
    onDateChange() {
      if (this.$refs.formitem && this.formData[this.prop]) {
        const options =
          this.$refs.formitem.$refs.datepicker.pickerOptions.shortcuts;
        const data = options.find((it) => it.htnum == this.formData[this.prop]);
        this.value = data.text;
      } else if (
        !this.formData[this.prop] &&
        this.formData[this.startTimeField] &&
        this.formData[this.endTimeField]
      ) {
        this.value =
          dayjs(this.formData[this.startTimeField]).format("YYYY-MM-DD") +
          " 至 " +
          dayjs(this.formData[this.endTimeField]).format("YYYY-MM-DD");
      } else {
        this.value = "";
      }
      this.onCloseDatepicker();
      this.$emit("formDataUpdate", this.formData);
    },
    onReset(resetFormData) {
      this.$refs.formitem.onReset();
      this.formData[this.prop] = resetFormData[this.prop];
      this.onDateChange();
    },
  },
  mounted() {
    this.onDateChange();
  },
  render() {
    return (
      <div class="aoneui-select-wrapper">
        <el-select
          class="aoneui-select"
          v-model={this.value}
          ref="formselect"
          clearable={true}
          placeholder={this.placeholderSync}
          onClear={this.onClear}
          popper-append-to-body={false}
          {...{
            on: {
              "visible-change": this.onVisibleChange,
            },
          }}
        >
          <el-option value={1}>
            <FormDatePicker
              class="aoneui-select-datepicker"
              ref="formitem"
              {...{
                props: this.$props,
              }}
              appendToBody={false}
              onDateChange={this.onDateChange}
            />
          </el-option>
        </el-select>
      </div>
    );
  },
};
</script>

<style lang="scss" scoped>
.aoneui-select-wrapper {
  /deep/ {
    .el-input__inner {
      height: 32px;
      line-height: 32px;
      padding-right: 28px;
    }
    .el-select-dropdown {
      margin: 0;
      border: 0;
      > .popper__arrow {
        display: none;
      }
    }
    .el-scrollbar {
      overflow: initial;
      > .el-scrollbar__bar {
        display: none;
      }
    }
    .el-scrollbar__wrap {
      overflow: initial;
      max-height: initial;
    }
    .el-select-dropdown__list {
      padding: 0;
    }
    .el-select-dropdown__item {
      height: 0;
      line-height: 0;
      position: initial;
      overflow: initial;
    }
  }
}
.aoneui-select-datepicker {
  height: 0!important;
  padding: 0;
  border: 0;
  /deep/ {
    > .el-input__icon,
    > .el-range-input,
    > .el-range-separator {
      display: none;
    }
  }
}
</style>